@import "../common/component-function";

@topHeight: 50px;

html {
  width: 100%;
  height: 100%;
}

body {
  min-width: 1180px;
  height: 100%;
  background-color: rgb(27, 39, 55);
}

.g-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.g-top {
  width: 100%;
  height: @topHeight;
  background-color: rgb(53, 152, 220);

  .logo {
    width: 300px;
    color: #ffffff;
    line-height: 50px;
    text-indent: 2em;
  }
  .logo-inf {
    width: 500px;
    color: #ffffff;
    line-height: 50px;
    padding-right: 2em;
    text-align: right;
  }

}

.g-main {
  position: absolute;
  width: 100%;
  top: @topHeight;
  bottom: 0;
}

@navWidth: 120px;
@navHeight: 36px;
.g-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: @navWidth;

  ul, li {
    width: @navWidth;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    height: @navHeight;
    line-height: @navHeight;
    padding: 10px 0;
    text-align: center;

    a {
      display: block;
      width: @navWidth;
      height: @navHeight;
      line-height: @navHeight;
      color: #7f8a98;
      font-size: 12px;
      transition: all .4s;

      &:hover {
        color: #fff;
        background-color: #344355;
      }
    }
  }
}

.g-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: @navWidth;
  right: 0;
  padding: 20px;
  .boxsizing();
  background-color: #fff;
}

.g-tablewrap {
  border: 1px solid #ececec;

  .table-header {
    width: 100%;
    padding: 20px;
    .boxsizing()
  }

  .g-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
    color: #6d6d6d;

    thead {
      background-color: #cad3de;
      td {
        height: 40px;
        font-size:14px;
        line-height: 40px;
        color: #fff;
        text-align: center;
      }
    }
    tbody {
      tr {
        &:nth-of-type(2n) {
          background-color: #f5f8fd;
        }
        &:hover {
          background-color: #dff2f0;
        }
      }
      td {
        height: 36px;
        line-height: 36px;
        padding: 5px;
        text-align: center;
      }
    }
  }
}